<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/templates/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">
    <style>
        .top{
        vertical-align: top;
        width: 50%;
        }
        .bold{
        font-weight: bold;
        }
    </style>
    <ui:define name="title">
        Search Member
    </ui:define>
    <ui:define name="body">
        <h:panelGrid columns="2" columnClasses="top,top" width="60%">
            <h:form>
                <rich:tree id="tree" nodeType="#{node.type}" var="node" value="#{dynamicTreeBean.rootNodes}"
                           toggleType="server" selectionType="ajax" selectionChangeListener="#{dynamicTreeBean.selectionChanged}" toggleListener="#{dynamicTreeBean.processTreeToggle}">

                    <rich:treeNode type="country" >
                        #{node.name}
                    </rich:treeNode>
                    <rich:treeNode type="company" icon="/images/tree/disc.gif">
                        #{node.name}
                    </rich:treeNode>
                    <rich:treeNode type="cd" icon="/images/tree/song.gif">
                        #{node.artist} - #{node.name} - #{node.year}
                    </rich:treeNode>
                </rich:tree>
            </h:form>
            <a4j:outputPanel ajaxRendered="true" layout="block">
                <rich:panel header="Current Selection"
                            rendered="#{not empty dynamicTreeBean.currentSelection}">
                    <h:outputText value="Name:" />
                    <h:outputText value="#{dynamicTreeBean.currentSelection.name}" />
                    <h:panelGroup rendered="#{dynamicTreeBean.currentSelection.leaf}">
                        <fieldset><legend>Details</legend> <h:panelGrid columnClasses="bold"
                                                                        columns="2">
                            <h:outputText value="Country:" />
                            <h:outputText value="#{dynamicTreeBean.currentSelection.company.country}" />
                            <h:outputText value="Company:" />
                            <h:outputText value="#{dynamicTreeBean.currentSelection.company}" />
                            <h:outputText value="Artist:" />
                            <h:outputText value="#{dynamicTreeBean.currentSelection.artist}" />
                            <h:outputText value="Price:" />
                            <h:outputText value="#{dynamicTreeBean.currentSelection.price}">
                                <f:convertNumber type="currency" currencyCode="USD"/>
                            </h:outputText>
                            <h:outputText value="Year:" />
                            <h:outputText value="#{dynamicTreeBean.currentSelection.year}" />
                        </h:panelGrid></fieldset>
                    </h:panelGroup>
                </rich:panel>
            </a4j:outputPanel>
        </h:panelGrid>
    </ui:define>
</ui:composition>